<script setup>
import { computed } from 'vue'
import { Handle, Position, useVueFlow } from '@vue-flow/core'
import { ElMessage } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

const props = defineProps({
  position: {
    type: Object,
    required: false,
  },
  data: {
    type: Object,
    required: false,
  },
  id: {
    type: String,
    required: true,
  },
  userList: {
    type: Array,
    required: false,
  },
})

const x = computed(() => `${Math.round(props.position.x)}px`)
const y = computed(() => `${Math.round(props.position.y)}px`)
const temp = computed(() => {})

const { removeNodes, getNodes } = useVueFlow()

const handleClickDelete = () => {
  if (getNodes.value.length > 3) {
    removeNodes(props.id)
  } else {
    ElMessage({
      message: '至少保留三个节点',
      type: 'warning',
    })
  }
}
</script>

<template>
  <div :class="props.data.nodeTitle">
    <div class="title-container">
      <div>{{ props.data.nodeTitle }}</div>
      <el-button
        v-if="props.data.deletable"
        circle
        color="#ffffff"
        icon="Close"
        size="small"
        text
        @click.stop="handleClickDelete"
      ></el-button>
    </div>

    <div class="content-container">
      <span v-if="props.data.nodeTitle === '提交'" class="content-span">
        <div>
          <div class="content">提交人: 全员可提交</div>
        </div>
        <el-icon v-if="props.data.value.length > 0" style="width: 14px; height: 14px"
          ><ArrowRight
        /></el-icon>
      </span>
      <span v-if="props.data.nodeTitle === '结束'" class="content-span">
        <div>
          <div class="content">结束流程</div>
        </div>
        <el-icon v-if="props.data.value.length > 0" style="width: 14px; height: 14px"
          ><ArrowRight
        /></el-icon>
      </span>
      <span v-if="props.data.nodeTitle === '审批'" class="content-span">
        <div v-for="(item, index) in data.value">
          <div v-if="index === 0" class="content">审批人: {{ item.selectType }}</div>
        </div>
        <el-icon v-if="props.data.value.length > 0" style="width: 14px; height: 14px"
          ><ArrowRight
        /></el-icon>
      </span>
      <span v-if="props.data.nodeTitle === '办理'" class="content-span">
        <div v-for="(item, index) in data.value">
          <div v-if="index === 0" class="content">办理人: {{ item.selectType }}</div>
        </div>
        <el-icon v-if="props.data.value.length > 0" style="width: 14px; height: 14px"
          ><ArrowRight
        /></el-icon>
      </span>
      <span v-if="props.data.nodeTitle === '抄送'" class="content-span">
        <div v-for="(item, index) in data.value">
          <div v-if="index === 0" class="content">抄送人: {{ item.selectType }}</div>
        </div>
        <el-icon v-if="props.data.value.length > 0" style="width: 14px; height: 14px"
          ><ArrowRight
        /></el-icon>
      </span>
      <span v-if="props.data.nodeTitle === '条件分支'" class="content-span">
        <div v-for="(item, index) in data.value">
          <div v-if="index === 0" class="content">
            {{ item.selectType + ' ' + item.condition + ' ' + item.number }}
          </div>
        </div>
        <el-icon v-if="props.data.value.length > 0" style="width: 14px; height: 14px"
          ><ArrowRight
        /></el-icon>
      </span>
    </div>

    <Handle id="source-t" :position="Position.Top" type="source" />
    <!--    <Handle id="source-r" :position="Position.Right" type="source"/>-->
    <Handle id="source-b" :position="Position.Bottom" type="source" />
    <!--    <Handle id="source-l" :position="Position.Left" type="source"/>-->

    <Handle id="target-t" :position="Position.Top" type="target" />
    <!--    <Handle id="target-r" :position="Position.Right" type="target"/>-->
    <Handle id="target-b" :position="Position.Bottom" type="target" />
    <!--    <Handle id="target-l" :position="Position.Left" type="target"/>-->
  </div>
</template>

<style lang="scss" scoped>
.提交 {
  display: flex;
  width: 200px;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--el-border-radius-base);
  background: #409eff;

  .title-container {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    height: 22px;
    width: 100%;
    background: #409eff;
    color: #ffffff;
    border-radius: var(--el-border-radius-base);
    font-feature-settings:
      'ss01' on,
      'ss04' on;
    font-family: 'MiSans';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
  }
}

.审批 {
  display: flex;
  width: 200px;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--el-border-radius-base);
  background: #e6a23c;

  .title-container {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    height: 22px;
    width: 100%;
    color: #ffffff;
    background: #e6a23c;
    border-radius: var(--el-border-radius-base);
    font-feature-settings:
      'ss01' on,
      'ss04' on;
    font-family: 'MiSans';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
  }
}

.抄送 {
  display: flex;
  width: 200px;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--el-border-radius-base);
  background: #67c23a;

  .title-container {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    height: 22px;
    width: 100%;
    color: #ffffff;
    background: #67c23a;
    border-radius: var(--el-border-radius-base);
    font-feature-settings:
      'ss01' on,
      'ss04' on;
    font-family: 'MiSans';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
  }
}

.办理 {
  display: flex;
  width: 200px;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--el-border-radius-base);
  background: #9f3ac2;

  .title-container {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    height: 22px;
    width: 100%;
    color: #ffffff;
    background: #9f3ac2;
    border-radius: var(--el-border-radius-base);
    font-feature-settings:
      'ss01' on,
      'ss04' on;
    font-family: 'MiSans';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
  }
}

.条件分支 {
  display: flex;
  width: 200px;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--el-border-radius-base);
  background: #f2f3f5;

  .title-container {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    height: 22px;
    width: 100%;
    color: #409eff;
    background: #f2f3f5;
    border-radius: var(--el-border-radius-base);
    font-feature-settings:
      'ss01' on,
      'ss04' on;
    font-family: 'MiSans';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
  }
}

.结束 {
  display: flex;
  width: 200px;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--el-border-radius-base);
  background: #8c939d;

  .title-container {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    height: 22px;
    width: 100%;
    color: #ffffff;
    background: #8c939d;
    border-radius: var(--el-border-radius-base);
    font-feature-settings:
      'ss01' on,
      'ss04' on;
    font-family: 'MiSans';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
  }
}

.content-container {
  padding: 4px;
  height: 38px;
  width: 192px;
  background: #ffffff;
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.content {
  overflow: hidden;
  //height: 38px;
  width: 160px;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  color: #606266;
  font-feature-settings:
    'ss01' on,
    'ss04' on;
  font-family: 'MiSans';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
</style>
